import React from 'react';
import { View, Text, Image, TouchableOpacity, ScrollView } from 'react-native';
import styles from './styles'
import Icon from 'react-native-vector-icons/Entypo';
import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
import HomeHeader from '@/c/HomeHeader'
import { dp } from '@/utils/index';
import { useNavigation } from '@react-navigation/native';
// import Rectangle from 'src/assets/images/Rectangle.png'
const Mine = (props:any) => {
  const insets = useSafeAreaInsets()
  const navigation = useNavigation()
  const listArr = [
    {
      iconName: 'beamed-note',
      title: '播放列表',
      type: '1',
      id: 100
    },
    {
      iconName: 'baidu',
      title: '专辑',
      type: '2',
      id: 101
    },
    {
      iconName: 'compass',
      title: 'MV',
      type: '2',
      id: 102
    },
    {
      iconName: 'drink',
      title: 'Artist',
      type: '3',
      id: 103
    },
    {
      iconName: 'traffic-cone',
      title: '下载',
      type: '0',
      id: 104
    },
  ]
  const toCollection = (type: string) => {
    navigation.navigate('Collection',{type:type})
  }
  return (
    <ScrollView nestedScrollEnabled={true} style={{backgroundColor: 'pink',}}>
      <View style={[styles.mine, { paddingTop: insets.top, paddingBottom: insets.bottom, }]}>
        <View style={styles.pd24}>
          <HomeHeader title="Account">
            <Icon name="menu" size={dp(26)} color="#eee" />
          </HomeHeader>
        </View>
        <View style={[styles.pd24, styles.info_main]}>
          <View style={styles.info_main_left}>
            <Image
              style={styles.info_main_left.img}
              source={require('src/assets/images/Ellips.png')}
            />
          </View>
          <View style={styles.info_main_right}>
            <View style={styles.info_main_right_top}>
              <View>
                <Text style={styles.p1}>22</Text>
                <Text style={styles.p2}>Playlist</Text>
              </View>
              <View>
                <Text style={styles.p1}>22</Text>
                <Text style={styles.p2}>Playlist</Text>
              </View>
              <View>
                <Text style={styles.p1}>22</Text>
                <Text style={styles.p2}>Playlist</Text>
              </View>
            </View>
            <View style={styles.info_main_right_bottom}>
              <Text style={[styles.info_main_right_bottom.btn, { textAlign: 'center' }]}>Edit</Text>
            </View>
          </View>

        </View>
        <View style={[styles.play_list, styles.pd24]}>
          <Text style={styles.play_list_title}>
            Library
          </Text>
          <View style={styles.play_list_main}>
            {listArr.map((item) => {
              return (
                <TouchableOpacity activeOpacity={0.9} style={styles.play_list_li} key={item.id} onPress={() => toCollection(item.type)}>
                  <Icon name={item.iconName} size={dp(26)} color="#eee"></Icon>
                  <View style={styles.play_list_main_li_flex}>
                    <Text style={{ color: '#eee', fontSize: dp(14) }}>{item.title}</Text>
                    <Icon name="chevron-right" size={dp(26)} color="#eee"></Icon>
                  </View>
                </TouchableOpacity>
              )
            })}
          </View>
        </View>
        <View style={styles.play_list}>
          <Text style={[styles.play_list_title, { paddingLeft: dp(24) }]}>
            Recent Activity
          </Text>
          {/* 滚动视图 */}
          <ScrollView horizontal={true} style={styles.activity_list_main}>
            <View>
              <View style={styles.ul}>
                {listArr.map((item) => {
                  return (
                    <View key={item.id} style={styles.ul_li}>
                      <Image
                        style={styles.info_main_left.img}
                        source={require('src/assets/images/Ellips.png')}
                      />
                    </View>
                  )
                })}
              </View>
              <View style={styles.ul}>
                {listArr.map((item) => {
                  return (
                    <View key={item.id} style={styles.ul_li}>
                      <Image
                        style={styles.info_main_left.img}
                        source={require('src/assets/images/Ellips.png')}
                      />
                    </View>
                  )
                })}
              </View>
            </View>

          </ScrollView>
        </View>
      </View>
    </ScrollView>
  )
};

export default Mine;